<template>
  <h1>hello vue3</h1>
  <p>count: {{ count }}, 它是 {{ oddOrEven }}</p>
  <button @click="handleIncrement">+</button>
  <button @click="handleDecrement">-</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useCounterStore } from "./store/modules/counter";

export default defineComponent({
  name: "App",
  computed: {
    // state和getters都通过mapState映射
    ...mapState(useCounterStore, ["count", "oddOrEven"]),
  },
  methods: {
    ...mapActions(useCounterStore, ["increment", "decrement"]),
    handleIncrement() {
      // 调用action函数
      this.increment(1, 2, 3, 4, 5);
    },
    handleDecrement() {
      this.decrement(1);
    },
  },
});
</script>

<style scoped></style>
